<template>
    <div class="floor-left">
        <font-vue>共{{totle}}字</font-vue>
        <div class="jump" @click="goback">
            <font-vue>{{dowmWord}}
                <i class="iconfont " :class="dowm"></i>
            </font-vue>
        </div>
    </div>

</template>

<script>
import labelVue from '@/components/Editor/Common/Label';
import fontVue from '@/components/Editor/Common/Font';
import '@/assets/iconfont/iconfont.css';

export default {
    components: {
        labelVue,
        fontVue,
    },
    props: {
        totle: {
            type: Number,
            default: 0,
        }
    },
    data() {
        return {
            dowm: 'icon-xiangxiajiantou',
            dowmWord: '发文设置'
        }
    },
    methods: {
        goback() {
            var jump = document.documentElement.scrollTop;
            if (jump>300) {
                document.documentElement.scrollTop=0;
            }
            if (jump < 300){
                document.documentElement.scrollTop=688;
            }
        },
        scrollToTop() {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop>500){
                this.dowm='icon-xiangshangjiantou',
                this.dowmWord='回到顶部'
            }
            if(scrollTop<300){
                this.dowm='icon-xiangxiajiantou',
                this.dowmWord='发文设置'
            }
        },
        destroyed() {
            window.removeEventListener("scroll", this.scrollToTop);
        },
    },
    mounted() {
        // 侦听事件并处理相应函数
        window.addEventListener("scroll", this.scrollToTop);
    },
}
</script>

<style scoped>
.iconfont {
    font-size: 12px;
}

.jump {
    width: 200px;
    cursor: pointer;
}

.floor-left {
    display: flex;
    text-align: center;
    line-height: 70px;
}
</style>